import React, { useEffect } from 'react';
import { StyleSheet, View, Text, Image, ImageBackground } from 'react-native';
import Swiper from 'react-native-swiper';
import Btn from './Btn'
import '../global'
import { useInstall } from '../context';
// import AsyncStorage from '@react-native-async-storage/async-storage';
// 由于在global里面封装了AsyncStorage,所以引入了global,可以直接下面使用AsyncStorage而不用引入
const SwiperPicture = () => {
    const {setIsInstall} = useInstall();
    return (
        <View style={{ width: '100%', height: '100%' }}>
            <Swiper
                style={styles.wrapper}
                loop={false}
                autoplay={true}
                showsPagination={true}
                autoplayTimeout={2}
                dot={<View style={{
                    backgroundColor: 'rgba(0,0,0,0.4)',
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    marginLeft: 20,
                    marginRight: 20,
                    marginTop: 10,
                    marginBottom: 10,
                }} />}
                activeDot={<View style={{
                    backgroundColor: '#fff',
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    marginLeft: 20,
                    marginRight: 20,
                    marginTop: 10,
                    marginBottom: 10,
                }} />}
                paginationStyle={{ bottom: 0.15 * h }}
            >
                <View style={styles.slide}>
                    <Image style={styles.img}
                        source={require('../assets/HomeworkFour/first.png')} />
                </View>
                <View style={styles.slide}>
                    <Image style={styles.img}
                        source={require('../assets/HomeworkFour/second.png')} />
                </View>
                <View style={styles.slide}>
                    <ImageBackground
                        source={require('../assets/HomeworkFour/third.jpg')}
                        style={styles.img}
                    >
                        <View style={styles.boxBtn}>
                            <Btn
                                style={styles.btn}
                                font={{ color: '#fff', fontSize: 20 }}
                                onPress={() => {
                                    setIsInstall(true);
                                    // key和value都需要是字符串形式
                                    AsyncStorage.setItem('install','true');
                                }}
                            >
                                立即体验
                            </Btn>
                        </View>
                    </ImageBackground>

                </View>
            </Swiper>
        </View >
    );
}
const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: '#ccc',
        justifyContent: 'center',
        alignItems: 'center',
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    img: {
        width: '100%',
        height: '100%'
    },
    boxBtn: {
        width: 0.4 * w,
        height: 0.08 * h,
        marginLeft: 0.3 * w,
        marginTop: 0.9 * h,
    },
    btn: {
        fontSize: 50,
        width: 0.4 * w,
        height: 50,
        backgroundColor: 'rgba(255,255,255,0.3)',
        borderRadius: 25,
    },
});
export default SwiperPicture;
